<template>
	<view class="golden-bean-wrapper">
		<view class="my-golden-bean-number mg24">
			<view class="golden-title fz26">
				我的金豆
			</view>
			<view class="golden-number fz48">
				{{ jinDouBalance }}
			</view>
		</view>
		
		<view class="recommend-wrapper conteainer-public-style flex-c">
			<view class="recharge-item flex-c-col" v-for="(item,index) in activityList" :class="[currentIndex === index ? 'active-r' : '', index > 0 && (index + 1) % 3 == 0 ? 'clear-m' : '']" @click="toggleGolden(index)">
				<view class="flex-c">
					<image style="width: 44rpx; height: 44rpx;" src="/static/images/image4459@2x.png" mode=""></image>
					<text class="get-golden">{{ item.originalPrice }}</text>
				</view>
				<view class="pay-money fz28">
					￥ {{ item.sellingPrice }}
				</view>
				<view class="recommend">
					{{ item.name }}
				</view>
			</view>
		</view>
		
		<view class="bottom-wrapper">
			<view class="recharge-bottom-opration">
				<view class="flex-c-s">
					<view class="recharge-number-box">
						<text class="color-theme">¥ {{currentBeanPrice}}</text><text class="fz22 gray-color">元 余额{{ jinDouBalance }}金豆</text>
					</view>
					<button class="public-large-btn" @click="payHandle">立即支付</button>
				</view>
				<view class="agreement flex-c-col">
					<view class="flex-c">
						<label class="fz22 flex-c">
							<checkbox value="cb" color="#EB5883" style="transform:scale(0.7)" checked="true" />我已阅读并同意
						</label>
						<text class="fz22 color-theme">用户充值协议</text>
					</view>
				</view>
			</view>
		</view>
		<Payment ref="paymentNode" 
		:disabledWeChatPay="true" 
		:disabledJinDou="true" 
		:showOffline="true" 
		:disabledOffline="false" 
		:defaultPayType="4"
		@confirm="confirmHandle" 
		@changeType="changeType"
		 />
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { rechargeActivityList,rechargeActivityBuy, assetsInfo } from '@/http/my'
import { payType } from '@/config'
import Payment from '@/components/Payment.vue'

import type { IActivityList } from '@/types'
export default defineComponent({
	components: {
		Payment
	},
	setup() {
		const state = reactive({
			currentIndex: 0,
			rechargeNum: 1000,
			activityList:[] as Array <IActivityList>,
			jinDouBalance: 0,
			currentBeanPrice: 0,
			payType: 2
		})
		
		const paymentNode = ref()
		
		onLoad( async() => {
			let res = await rechargeActivityList();
			if(res.code === 0) {
				state.activityList = res.data.list
				if(state.activityList.length) {
					state.currentBeanPrice = state.activityList[0].sellingPrice
				}  
			} 
			getMyGoldenBean()
		})
		
		const toggleGolden = (index: number) => {
			state.currentIndex = index
			state.currentBeanPrice = state.activityList[index].sellingPrice
		}
		
		const getMyGoldenBean = async () => { // 获取金豆余额
			let res = await assetsInfo()
			if(res.code === 0) {
				state.jinDouBalance = res.data?.jindouBalance || 0
			} 
		}
		
		const payHandle = async () => {
			if(!state.activityList.length) {
				uni.showToast({ title: '没有可充值的金豆列表', icon: 'none' })
				return 
			}
			paymentNode.value.openLayer() 
		}
		
		const confirmHandle = async (type: number) => { // 支付成功回调
			state.payType = type
			const id = state.activityList[state.currentIndex].id;
			let res = await rechargeActivityBuy({id, payType: state.payType})
			console.log({id, payType: state.payType});
			console.log(res);
			if(res.code === 0) {
				if(state.payType === payType.PayTypeBalance || state.payType === payType.PayTypeOffline) { // 余额
					getMyGoldenBean()
					paymentNode.value.closeLayer()
					if(state.payType === payType.PayTypeOffline) {
						uni.showModal({
							title: '提示',
							content: '充值成功等待管理员审核',
							showCancel: false,
							confirmText: '知道了',
							success({confirm}) {
								
							}
						})
					} else {
						uni.showToast({ title: '充值成功', icon: 'success' })
					}
				} else if(state.payType === payType.PayTypeAliPay) {
					uni.requestPayment({
					    provider: 'alipay',
					    orderInfo: res.data.payParam, 
					    success: function (res) {
							getMyGoldenBean() 
							uni.showToast({ title: '充值成功', icon: 'success' })
					    },
					    fail: function (err) {
					        uni.showToast({ title: '充值失败', icon: 'error' })
					    }
					});
				}
			} else {
				uni.showToast({ title: res.msg || '充值失败', icon: 'none' })
			} 
		}
		
		const changeType = (type: number) => { // 切换支付类型
			state.payType = type
		}
		
		return {
			payHandle,
			toggleGolden,
			confirmHandle, 
			paymentNode,
			changeType,
			...toRefs(state)
		}
	}
})
</script>

<style>page{background-color: #f8f8fa;}</style>

<style lang="scss" scoped>
.golden-bean-wrapper{
	.my-golden-bean-number{
		background-image: url(/static/images/Frame82@2x.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 702rpx 184rpx;
		height: 184rpx;
		color: #fff; 
		margin-bottom: 0;
		.golden-title{
			padding-top: 24rpx;
			margin: 0 0 12rpx 50rpx;
		}
		.golden-number{
			font-weight: 800;
			margin: 0 0 0rpx 50rpx;
		}
	}
	.recommend-wrapper{
		flex-wrap: wrap;
		.recharge-item{
			width: 216rpx;
			height: 210rpx;
			background: #faebf1;
			border: 2rpx solid #faebf1;
			border-radius: 32rpx;
			margin: 0 18rpx 24rpx 0;
			.get-golden{
				font-size: 36rpx;
				font-weight: 700;
			}
			.pay-money{
				margin: 10rpx 0 30rpx;
			}
			.recommend{
				width: 194rpx;
				height: 46rpx;
				background: #eb5883;
				border-radius: 23rpx;
				text-align: center;
				line-height: 46rpx;
				color: #fff;
				font-size: 22rpx;
			}
		}
	}
	.active-r{
		border: 2px solid #eb5883 !important;
	}
	.clear-m{ margin-right: 0 !important;}
	.recharge-bottom-opration{
		width: 100%;
		.flex-c-s{
			padding: 0 24rpx;
		}
		.public-large-btn{
			width: 286rpx;
			height: 74rpx;
			background: linear-gradient(270deg,#eb57ae 0%, #eb5480);
			border-radius: 38rpx;
			margin: 0;
			
		}
		.agreement{
			padding:16rpx 0 30rpx 0;
		}
	}
}
</style>